<template>
    <div class="app-container">
        <el-card class="box-card components-container">
            <el-form ref="form" :model="courseForm" label-width="80px">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="课程名称" prop="name">
                            {{ courseForm.name }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属专业" prop="sutudentNo">
                            {{ courseForm.specialityName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="授课教师" prop="nickName">
                            {{ courseForm.creatorName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="创建时间" prop="password">
                            {{ courseForm.createTime }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="是否有效" prop="gender">
                            <template slot-scope="scope">
                                <el-switch v-model="courseForm.validFlag" :active-value="1" :inactive-value="0"
                                    disabled></el-switch>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="课程图片" prop="phone">
                            <el-image style="width: 100px; height: 100px" :src="courseForm.resultImage"
                                :preview-src-list="courseForm.srcList"></el-image>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="课程简介" prop="headerImage">
                    <div v-html="courseForm.remark"></div>
                    <!-- <editor v-model="courseForm.remark" :min-height="10" disabled /> -->
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card components-container">

        </el-card>
        <el-card class="box-card components-container">
            <el-collapse v-model="activeNames" @change="handleChange">
                <template v-for="(item, index) in unitList">
                    <el-collapse-item :title="item.name" :name="index">
                        <div class="unitAndTask" v-html="item.remark"></div>
                        <div class="unitAndTask taskInfo" v-for="(task, index2) in item.ttaskInfoVos" @click = "handleView(task.id)">
                            <span>
                                <i v-if="task.isExist != 0" class="el-icon-success" style="color: green;"></i>
                                <i v-else class="el-icon-remove-outline"></i>
                            </span>
                            <span class="taskName">
                                {{ task.name }}
                            </span>
                        </div>
                    </el-collapse-item>
                </template>
            </el-collapse>
        </el-card>

    </div>
</template>
  
<script>
import { getCourse } from "@/api/student/course";
import { listRecordUnit } from "@/api/student/unit";
export default {
    name: "studentRecord",
    data() {
        return {
            courseForm: {
                name: '',
                specialityName: '',
                resultImage: '',
                creatorName: '',
                createTime: '',
                remark: '',
                resultCode: '',
                resultImage: '',
                validFlag: '',
                srcList: [],
                tunitInfoVos: []
            },
            form: {
                name: '',
                sutudentNo: '',
                nickName: '',
                password: '',
                phone: '',
                gender: '',
                headerImage: '',
                birthday: '',
                specialityName: '',
                gradeName: '',
                className: '',
                validFlag: '',
                remark: '',
                srcList: []
            },
            // 课程表格数据
            tCourseInfoVos: [],
            // 单元表格数据
            unitList: [],
            loading: true,
            activeNames: 0
        };
    },
    created() {
        // this.getStudentDetail();
        this.getCourseDetail();
        this.getRecordList();
    },
    watch: {
        '$route.name': {
            immediate: true,
            handler() {
                console.log(this.$route.name);
                if (this.$route.name == 'studentRecord') {
                    this.getCourseDetail();
                    this.getRecordList();
                }
            }
        }
    },
    methods: {
        // onSubmit() {
        //     console.log('submit!');
        // },
        getCourseDetail() {
            var id = this.$route.query.id
            getCourse(id).then(response => {
                response.data.resultImage = "/dev-api" + response.data.resultImage
                response.data.srcList = [response.data.resultImage];
                // /profile/upload/2023/09/09/木门_20230909235902A001.jpg
                this.courseForm = response.data;
                console.log(this.form);
            });
        },
        /** 查询单元列表 */
        getRecordList() {
            var queryParams = { courseId: this.$route.query.id, studentId: this.$route.query.studentId }
            listRecordUnit(queryParams).then(response => {
                this.unitList = response.rows;
                console.log(this.unitList);
            });
        },
        handleChange(val) {
            console.log(val)
        },
        /** 详情按钮操作 */
        handleView(id) {
            console.log(id);
            this.handleToDetailPage(id)
        },
        // 跳转到任务详情页面(路由跳转)
        handleToDetailPage(id) {
            this.$router.push({
                name: 'taskInfo',
                query: {
                    id: id,
                    studentId: this.$route.query.studentId
                },
            });
        }
    }
};
</script>
<style>
.card-head {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    background-color: purple;
    padding: 20px;
    color: white;
    font-size: 20px;
}

.card-body {
    padding: 20px;
}

.user-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
}

.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 15px;
    line-height: 12px;
}

.button {
    padding: 6px;
    float: right;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.card-content {
    font-size: 12px;
    line-height: 20px;
    color: #999;
}

.unitAndTask {
    font-size: 15px;
}

.el-collapse-item__header {
    font-size: 20px;
}

.taskInfo:hover {
    background-color: rgb(221, 213, 213);
}

.taskName {
    margin-left: 10px;
}
</style>
  